devfandomcom-20200223-history
Highlight-js
| Code = code.js | Type = libraries }} Highlight-js is an asynchronous Fandom port of highlightjs, a component-based syntax highlighting library. The original documentation is on readthedocs.org. Usage Importing the script To use Highlight-js, you need to import it into your script. You can listen for the dev.highlight event using mw.hook. // register the hook before the import to avoid race conditions mw.hook('dev.highlight').add(function(hljs) { // hljs is a shortcut to window.dev.highlight }); importArticle({ type: 'script', article: 'u:dev:MediaWiki:Highlight-js.js' }); The script creates a window.dev.highlight (internal alias hljs within the hook). Loading languages The library object has the following methods for loading languages: ;hljs.loadLanguages • hljs.loadLanguage (function) :Accepts a string/array of language name/alias(es). :Loads the language component(s) and returns a Deferred event to use. :Passes window.dev.highlight as an argument when resolved. ;hljs.loadAllLanguages :Loads all language components in the library. :Returns a Deferred event that resolves with hljs as the argument ;hljs.listLanguages (function) :Returns an array of language component names that have been loaded. ;hljs.registerLanguage (function) :Internal method used to register/configure new language components. ;hljs.loadedLanguage (function) :Accepts a string indicating the language name/alias. :Returns a boolean indicating whether its configuration has loaded. Library data and validation The following object methods/members are used for library validation and data retrieval: ;hljs.registry (object) :Registry of languages, aliases and styles for library validation. :Contains the following keys: * languages - language codes that are available in the library * aliases - dealiasing object for language aliases * styles - Object mapping style names to titles ;hljs.canonicalName (function) :Accepts a string for a language name/alias. :Returns the canonical language name if valid, or undefined. ;hljs.getLanguage (function) :Accepts a string indicating the language name/alias. :Returns the object for the language component configuration. ;hljs.validLanguage (function) :Accepts a string indicating the language name/alias. :Returns a boolean indicating whether it is valid. Highlighting functions The following methods are used for highlighting when language components have loaded. ;hljs.highlight (function) :Main function - accepts a language name and string value to highlight. :Arguments: (name, value, ?ignore_illegals, ?continuation) :It generates an object with following keys. * value - highlighted text * language - language name, dealiased * relevance - count of highlighted identities :You need to hljs.loadLanguage(name) first! ;hljs.highlightBlock (function) :Main function for DOM elements - accepts a DOM node. :Arguments: (block) - block of code :Expects language name as a class name, or nohighlight. :Highlights the block and attaches some object keys to the block variable. :You need to load the language first! ;hljs.highlightAuto (function) :Computes the language of highest relevancy. :Accepts text and an optional language subset. :Arguments: (block) :Returns the hljs.highlight object for that language. :You need to load all the languages first! ;hljs.initHighlightingOnLoad (function) :Highlights all plain code blocks in article content automatically. :Also highlights code when new articles or content have loaded. :NB: This method doesn't use hljs.highlightAuto. ;hljs.initHighlighting (function) :Highlights all plain code blocks in article content once. :Arguments: ($content) - content as JQuery (usually mw.util.$content) ;hljs.useTheme (function) :Accepts a style name and sets it as the currently used style. Language support The following languages are supported: Themes The following themes are supported: